<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*层次选择器
        * 1. 后代选择器
        * 2. 子元素选择器
        * 3. 相邻兄弟选择器
        */

        /*
         *  伪类
         *  伪元素
        */
        .box .message{
            color: red;
        }

        .box>.message{
            color: green;
        }

        li+li{
            color: red;
        }

        a:link{
            text-decoration: none;
        }
        a:visited{

        }
        a:hover{
            text-decoration:line-through;
        }
        a:active{
            text-decoration: underline;
        }

        .money:before{
            display: inline-block;/*block  inline */
            content: '$';
        }

        .money:after{
            display: inline-block;/*block  inline */
            content: '|';
        }

    </style>
</head>
<body>
<div class="box">
    <div class="message">hello</div>
</div>

<div class="box">
    <div>
        <div class="message">hello</div>
    </div>
</div>

<!--
  li*3 tab
-->
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

<a href="#">本页</a>


<div class="money">
    <span>100</span>
</div>
</body>
</html>